<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.clock{
			width: 220px;
			height: 220px;
			border: 5px solid yellow;
			border-radius: 50%;
			position: relative;
		}


		.clock .rotate_div{
			width: 200px;
			height: 20px;
			position: absolute;
			left: 10px;
			top:100px;
		}
		.clock span{
			display: inline-block;
		}
		.log .hand{
			width: 3px;	
		}
		.clock .hand{
			position: absolute;
			left: 50%;
			bottom: 50%;
			transform-origin: 100% bottom;
		}
		#hourDiv{
			width: 8px;
			height: 60px;
			background-color: black;
		}
		#minDiv{
			width: 5px;
			height: 70px;
			background-color: red;
		}
		#secDiv{
			width: 3px;
			height: 80px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="clock">
		<div class="rotate_div"><span class="num">9</span></div>
		<div class="rotate_div"><span class="num">10</span></div>
		<div class="rotate_div"><span class="num">11</span></div>
		<div class="rotate_div"><span class="num">12</span></div>
		<div class="rotate_div"><span class="num">1</span></div>
		<div class="rotate_div"><span class="num">2</span></div>
		<div class="rotate_div"><span class="num">3</span></div>
		<div class="rotate_div"><span class="num">4</span></div>
		<div class="rotate_div"><span class="num">5</span></div>
		<div class="rotate_div"><span class="num">6</span></div>
		<div class="rotate_div"><span class="num">7</span></div>
		<div class="rotate_div"><span class="num">8</span></div>
		<div class="hand" id="hourDiv"></div>
		<div class="hand" id="minDiv"></div>
		<div class="hand" id="secDiv"></div>
	</div>
</body>
<script type="text/javascript">
	var rot = document.getElementsByClassName('rotate_div');
	var num = document.getElementsByClassName('num');
	var hourDiv = document.getElementById('hourDiv');
	var minDiv = document.getElementById('minDiv');
	var secDiv = document.getElementById('secDiv');

	for(var i = 0;i < rot.length;i++){
		var count = i * 30;
		rot[i].style.transform = "rotate("+count+"deg)";
		num[i].style.transform = "rotate("+(-count)+"deg)";
	}

	function rotFun(){
		var nowDate = new Date();
		var hour = nowDate.getHours();
		var min = nowDate.getMinutes();
		var sec = nowDate.getSeconds();

		var secNum = sec*6;
		secDiv.style.transform = "rotate("+secNum+"deg)";
		var minNum = min*6 + sec*0.1;
		minDiv.style.transform = "rotate("+minNum+"deg)";
		var hourNum = hour*30 + min*0.5;
		hourDiv.style.transform = "rotate("+hourNum+"deg)";
	
	}
		rotFun();
		setInterval(function(){
			rotFun();
		},1000);


</script>
</html>